import { useState } from 'react'
import { ExclusiveOrVisibleWrap } from '../style'
import { Switch, Modal, CheckBox } from '@kedacom/react-next'
import { ShuttleBox } from './shuttleBox'
import { ListItem, MainListItem } from './interface'
import { useVirtualRoomStore } from '../../store'
import shallow from 'zustand/shallow'
import { t } from 'i18next'

export default function VisibleInfo() {
	const { data, updateData } = useVirtualRoomStore(
		(state) => ({
			data: state.data,
			updateData: state.updateData,
		}),
		shallow
	)

	const parentList: MainListItem[] = data.visibleUserDomains.map((v) => {
		return {
			...v,
			checked: false,
		}
	})
	const [show, setShow] = useState(false)
	const [list, setList] = useState<MainListItem[]>(parentList)
	const [currentIndex, setCurrentIndex] = useState(0)
	const [selectedList, setSelectedList] = useState<MainListItem[]>([])

	/** 删除按钮删除元素 */
	function handleDelete(): void {
		var l = list.filter((v) => !v.checked)
		setList([...l])
		setVisibleUserDomains(l)
	}

	/** 清空所有元素 */
	function handleClear(): void {
		setList([])
		setVisibleUserDomains([])
	}

	/** 弹窗确定按钮 */
	function handleOk() {
		setShow(false)
		setList([...selectedList])
		setVisibleUserDomains(selectedList)
	}

	function setVisibleUserDomains(list: MainListItem[]) {
		let _list = list.map((v) => {
			return {
				moid: v.moid,
				name: v.name,
			}
		})
		updateData({ visibleUserDomains: _list })
	}

	/** 点击CheckBox */
	function zoomChecked(index: number) {
		list.filter((v, i) => {
			if (i === index) {
				v.checked = !v.checked
			}
			return v
		})
		setList([...list])
	}

	/** 按Ctrl点击或者shift点击 */
	function ctrlOrShift(event: React.MouseEvent) {
		if (event.ctrlKey) return 'ctrl'
		if (event.shiftKey) return 'shift'
		return ''
	}

	/** 点击非CheckBox选中项 */
	function clickItem(e: React.MouseEvent, index: number) {
		let keyCode = ctrlOrShift(e)
		switch (keyCode) {
			case 'ctrl':
				list[index].checked = true
				setList([...list])
				break

			case 'shift':
				let max = Math.max(currentIndex, index)
				let min = Math.min(currentIndex, index)
				for (let i = min; i <= max; i++) {
					list[i].checked = true
				}
				setList([...list])
				break

			default:
				list.filter((v, i) => {
					if (i === index) {
						v.checked = true
					} else {
						v.checked = false
					}
					return v
				})
				setList([...list])
				break
		}
		setCurrentIndex(index)
	}

	/** 点击叉叉删除选中项 */
	function deleteItem(index: number) {
		list.splice(index, 1)
		setList([...list])
		setVisibleUserDomains(list)
	}

	/** 从子组件获取到的数据 */
	function getCheckedDomain(val: ListItem[]) {
		let l = val.map((v) => {
			return {
				moid: v.moid,
				name: v.name,
				checked: false,
			}
		})
		setSelectedList([...l])
	}

	return (
		<ExclusiveOrVisibleWrap>
			<div className="meeting-visibility">
				<div className="label">{t('会议可见性')}</div>
				<Switch
					width={40}
					height={22}
					checked={data.visible}
					onChange={(e, v) => {
						updateData({ visible: v })
					}}
				></Switch>
			</div>
			{data.visible ? (
				<div className="zoomListBox">
					<div className="zoomBox-label">
						<div>{t('会议可见用户域列表')}</div>
						<div className="buttonBox">
							<div onClick={() => handleDelete()} className="btn-del">
								{t('删除')}
							</div>
							<div onClick={(e) => handleClear()} className="btn-clear">
								{t('清空')}
							</div>
						</div>
					</div>
					<div className="addZoomBox">
						<div className="addZoom">
							<div onClick={() => setShow(true)} className="addButton"></div>
							<div className="addButtonText">{t('添加可见用户域')}</div>
						</div>
						<div className="chooseZoomList">
							{list.map((v, i) => {
								return (
									<div key={i} className={`${v.checked ? 'checked' : ''} list-item`}>
										<span className="checkbox-icon" onClick={() => zoomChecked(i)} />
										<div className="infoBox" onClick={(e) => clickItem(e, i)}>
											<div className="icon"></div>
											<div className="name">{v.name}</div>
										</div>
										<div
											className={`${v.checked ? 'checked' : ''} del`}
											onClick={() => deleteItem(i)}
										></div>
									</div>
								)
							})}
						</div>
					</div>
					<div className="footer">{t('可使用ctrl或shift快捷键进行多选')}</div>
					<Modal
						open={show}
						title={t('添加共享用户域')}
						onCancel={() => setShow(false)}
						onOk={() => handleOk()}
						width={822}
						height={623}
						okText={t('确定')}
						cancelText={t('取消')}
					>
						<ShuttleBox list={list} getCheckedDomain={getCheckedDomain}></ShuttleBox>
					</Modal>
				</div>
			) : (
				''
			)}
		</ExclusiveOrVisibleWrap>
	)
}
